<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/5.css">
</head>
<body>
    <div class="box">
        <div class="title">
            <span class="active">列表1</span>
            <span>列表2</span>
            <span>列表3</span>
            <span>列表4</span>
        </div>

        <div class="con">
            <div class="show">这是 列表11 的详情内容</div>
            <div>这是 列表2222 的详情内容</div>
            <div>这是 列表3333333 的详情内容</div>
            <div>这是 列表4444444444444 的详情内容</div>
        </div>
    </div>

    <script>
        // 1 获取元素
        var tits = document.querySelectorAll(".title span")
        // var tits = document.querySelector(".title").children;
        var cons = document.querySelectorAll(".con > div");
        // console.log(tits , cons)
        // 给每个标题span 绑定点击事件  即 循环绑定
        tits.forEach(function(span , i){
            span.onclick = function(){
                // 排他思想 干掉 别人 保留自己
                // 即 先把之前存在的高亮和 对应的内容消失
                document.querySelector(".active").classList.remove("active")
                document.querySelector(".show").classList.remove("show")
                // 给正在点击的添加高亮 且 对应的内容显示
                span.classList.add("active")
                cons[i].classList.add("show")
            }
        })
    </script>
</body>
</html>